<template>
  <ElementDialog ref="dialog" :visible="visible" embed title="新建采购申请">
    <p style="padding: 0 10px">申请明细-物品列表</p>
    <div style="padding: 4px 10px; color: #2d8cf0; text-align: right; background-color: #ebeef5">
      <span style="margin-right: 10px; cursor: pointer" @click="isPickerShow = true">添加</span>
      <span style="cursor: pointer" @click="del">删除所选</span>
    </div>
    <div class="flex-item-relative">
      <ElTable
        height="auto"
        :data="rows"
        style="position: absolute; top: 0; right: 0; bottom: 0; left: 0"
        @selection-change="onChange">
        <ElTableColumn type="selection" />
        <ElTableColumn prop="assetName" label="所属资产信息" />
        <ElTableColumn prop="fieldnameCn" label="字段中文名" />
        <ElTableColumn prop="fieldname" label="字段名" />
        <ElTableColumn prop="original" label="原值" />
        <ElTableColumn prop="modifyValue" label="修改值" />
      </ElTable>
    </div>
    <AssetCardTable :visible.sync="isPickerShow" @confirm="onConfirm" />
    <template #footer>
      <ElButton type="primary" @click="confirm">确定</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
  import { fetchList } from '@/api/asset/fyassetassetupdateinfo'

  export default {
    name: 'AssetCardTableDialog',
    props: {
      visible: Boolean
    },
    data() {
      return {
        isPickerShow: false,
        rows: [],
        selectedRows: []
      }
    },
    methods: {
      getPage(page) {
        return fetchList({ current: page.page, size: page.limit })
      },
      onConfirm(rows) {
        this.rows = rows
      },
      onChange(rows) {
        this.selectedRows = rows
      },
      del() {
        this.rows = this.rows.filter(value => !this.selectedRows.includes(value))
      },
      confirm() {
        this.$refs.dialog.hide()
      }
    }
  }
</script>
